<template>
    <div class="background-manage-container">
        <!-- 左侧 tab -->
        <a-tabs v-model:activeKey="activeTab">
            <!-- 静态壁纸 -->
            <a-tab-pane key="static" tab="静态壁纸">
                <StaticBackgroundTab/>
            </a-tab-pane>

            <!-- 动态壁纸 -->
            <a-tab-pane key="dynamic" tab="动态壁纸">
                <DynamicBackgroundTab/>
            </a-tab-pane>

            <!-- 上传壁纸 -->
            <a-tab-pane key="upload" tab="上传壁纸">
                <UploadBackgroundTab/>
            </a-tab-pane>

            <!-- 背景动效 -->
            <a-tab-pane key="effect" tab="背景动效">
                <EffectBackgroundTab/>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup>import {ref} from "vue";
import StaticBackgroundTab from "./tabs/StaticBackgroundTab.vue";
import DynamicBackgroundTab from "./tabs/DynamicBackgroundTab.vue";
import UploadBackgroundTab from "./tabs/UploadBackgroundTab.vue";
import EffectBackgroundTab from "./tabs/EffectBackgroundTab.vue";

const activeTab = ref("static");
</script>

<style lang="less" scoped>@import url("./style.less");
</style>